import { Chart } from "@antv/g2";

export class BoxEq {
    chart?: Chart;
    width: number;
    height: number
    constructor(width: string, height: string) {
        this.width = parseInt(width)
        this.height = parseInt(height)
    }
    init() {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById('box31') as HTMLElement,
            width, height,
            theme: 'classicDark',
            // title: '设备共享数量统计'
        })
        this.chart
            .data([])
            .encode('x', 'dateValue')
            .encode('y', 'value')
            .encode('color', 'name')
            .scale('color', {
                range: ['#5087ec', '#68bbc4', '#58a55c', '#f4c55a', '#ee752f', '#d95040'],
            })
            .scale('x', {
                range: [0, 1],
            })
            .scale('y', {
                nice: true,
            })
            .axis('y', { title: false })
            .axis('x', {
                title: false, labelFormatter: (data: string) => {
                    const d = data.split('-')
                    if (d[2] == '01') {
                        return d[0] + '年' + d[1]
                    } else {
                        return d[2]
                    }
                }
            })

        this.chart.line().encode('shape', 'smooth');

        this.chart.point().encode('shape', 'point').tooltip(false).scrollbar('x', {});
        this.chart.render()
    }
    setData(data: any) {
        this.chart?.changeData(data)
    }
}